<template>
  <a-card :bordered="false">
    <van-search placeholder="请选择条件查询" readonly @click="showSearchPopup" style="margin-top: -10px;width: 100%;padding: 0px;margin-bottom: 10px"/>
    <a-button type="primary" @click="searchReset" icon="reload" style="width: 100%;margin-bottom: 10px">重置</a-button>
    <!-- 查询区域 -->
    <!--<div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :span="4">
            <a-form-item label="客户姓名">
              <a-input placeholder="请输入客户姓名" v-model="queryParam.customerName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="工人姓名">
              <a-input placeholder="请输入工人姓名" v-model="queryParam.workerName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="结算状态">
              <a-select placeholder="请选择" v-model="queryParam.paymentStatus" style="width: 100%" @change="changePaymentStatus">
                <a-select-option value="0">已付款</a-select-option>
                <a-select-option value="1">未付款</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>-->

    <!-- table区域-begin -->
    <div>
      <div class="list">
        <van-list
          v-model="loading"
          :finished="finished"
          offset="100"
          finished-text="没有更多了"
          @load="onLoadList"
          :immediate-check="false"
        >
          <div
            class="customer-list"
            v-for="(item,i) in dataSource"
            :key="i"
          >
            <div>
              <div class="name">客户姓名：{{ item.customerName || '无' }}</div>
              <div class="contact">
                <span>劳务编号：{{ item.labourNo || '无' }}</span>
              </div>
              <div class="contact">
                <span>劳务类型：{{ getDictValue('customer_labour_distribute_labour_type',item.labourType) }}</span>
                <span style="margin-left: 20px">项目地址：{{ item.projectAddress || '无' }}</span>
              </div>
              <div class="contact">
                <span>工人姓名：{{ item.workerName || '无' }}</span>
                <span style="float: right">
                  <a @click="remit(item)" v-if="item.paymentStatus != 0">付款</a>
                  <a-divider type="vertical" v-if="item.paymentStatus != 0"/>
                  <a-popconfirm title="确定当前劳务已结清吗?" v-if="item.paymentStatus != 0" @confirm="() => settled(item)">
                    <a>已结清</a>
                  </a-popconfirm>
                </span>
              </div>
              <div class="contact">
                <span>劳务时间：{{ item.labourTime || '无' }}</span>
                <span style="margin-left: 20px">工期：{{ item.workDeadline || '无' }}</span>
              </div>
              <div class="contact">
                <span>付款账户：{{ item.paymentAccountName || '无' }}</span>
                <span style="margin-left: 20px">付款状态：
                  <a-tag color="orange" v-if="item.paymentStatus == 1">未结算</a-tag>
                  <a-tag color="blue" v-if="item.paymentStatus == 2">部分结算</a-tag>
                  <a-tag color="green" v-if="item.paymentStatus == 0">已结算</a-tag>
                </span>
              </div>
              <div class="contact">
                <span>劳务金额：{{ item.labourMoney || 0 }}</span>
                <span style="margin-left: 20px;margin-right: 20px">付款金额：{{ item.paymentMoney || 0 }}</span>
                <span>待付金额：{{ item.toBePaidMoney || 0 }}</span>
              </div>
              <div class="contact">
                <span>付款时间：{{ item.paymentTime || '无' }}</span>
              </div>
            </div>
          </div>
        </van-list>
      </div>

      <!--<a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>

        <span slot="paymentVoucher" slot-scope="text,record">
          <a v-if="text != null" @click="downloadFile(record)">预览</a>
          <span v-if="text==null">无</span>
        </span>

        <span slot="action" slot-scope="text, record">
          <a @click="remit(record)" v-if="record.paymentStatus != 0">付款</a>
          <a-divider type="vertical" v-if="record.paymentStatus != 0"/>
          <a-popconfirm title="确定当前劳务已结清吗?" v-if="record.paymentStatus != 0" @confirm="() => settled(record)">
            <a>已结清</a>
          </a-popconfirm>
          &lt;!&ndash;<a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>&ndash;&gt;
        </span>

      </a-table>-->

      <van-popup v-model="showSearchPopupFlag" position="top" >
        <a-card :bordered="false">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <div>客户姓名：<a-input placeholder="请输入客户姓名" v-model="queryParam.customerName"></a-input></div>
            <div style="margin-top: 5px">工人姓名：<a-input placeholder="请输入工人姓名" v-model="queryParam.workerName"></a-input></div>
            <div style="margin-top: 5px">结算状态：
              <van-dropdown-menu>
                <van-dropdown-item v-model="paymentStatus" :options="paymentStatusOption" @change="changePaymentStatus"/>
              </van-dropdown-menu>
            </div>
            <a-row :gutter="24" style="margin-bottom: 10px;margin-top: 10px">
              <a-col :span="12">
                <a-button type="primary" style="width: 100%" @click="searchQuery" icon="search">查询</a-button>
              </a-col>
              <a-col :span="12">
                <a-button type="primary" @click="searchReset" icon="reload" style="width: 100%">重置</a-button>
              </a-col>
            </a-row>
          </a-form>
        </a-card>
      </van-popup>

      <labour-pending-payment-modal ref="labourPendingPaymentModal" @ok="modalOk"></labour-pending-payment-modal>
    </div>

  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import {filterDictTextByCache} from '@comp/dict/JDictSelectUtil'
  import labourPendingPaymentModal from "./modules/labourPendingPaymentModal";
  import {getAction,putAction} from '@/api/manage'

  export default {
    name: 'labourPendingPaymentList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      labourPendingPaymentModal,
    },
    data () {
      return {
        description: '劳务待付款管理页面',
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'劳务编号',
            align:"center",
            dataIndex: 'labourNo'
          },
          {
            title:'客户姓名',
            align:"center",
            dataIndex: 'customerName'
          },
          {
            title:'工人姓名',
            align:"center",
            dataIndex: 'workerName'
          },
          /*{
            title:'工种',
            align:"center",
            dataIndex: 'workerType'
          },*/
          {
            title:'劳务类型',
            align:"center",
            dataIndex: 'labourType',
            customRender: (text) => {
              //字典值翻译通用方法
              return filterDictTextByCache('customer_labour_distribute_labour_type', text);
            }
          },
          {
            title:'项目地址',
            align:"center",
            dataIndex: 'projectAddress'
          },
          {
            title:'劳务时间',
            align:"center",
            dataIndex: 'labourTime'
          },
          {
            title:'工期',
            align:"center",
            dataIndex: 'workDeadline'
          },
          {
            title:'劳务金额',
            align:"center",
            dataIndex: 'labourMoney'
          },
          {
            title:'待付金额',
            align:"center",
            dataIndex: 'toBePaidMoney'
          },
          {
            title:'付款金额',
            align:"center",
            dataIndex: 'paymentMoney'
          },
          {
            title:'付款账户',
            align:"center",
            dataIndex: 'paymentAccountName'
          },
          {
            title:'付款状态',
            align:"center",
            dataIndex: 'paymentStatus',
            customRender:function (text) {
              if (text == 1){
                return <a-tag color="orange">未结算</a-tag>
              }else if (text == 2){
                return <a-tag color="blue">部分结算</a-tag>
              }else {
                return <a-tag color="green">已结算</a-tag>
              }
            }
          },
          {
            title:'付款凭证',
            align:"center",
            dataIndex: 'paymentVoucher',
            slots: { title: 'customTitle' },
            scopedSlots: { customRender: 'paymentVoucher' },
          },
          {
            title:'付款时间',
            align:"center",
            dataIndex: 'paymentTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/ghFinanceLabourPendingPayment/list",
          delete: "/ghFinanceLabourPendingPayment/delete",
          deleteBatch: "/ghFinanceLabourPendingPayment/deleteBatch",
          exportXlsUrl: "/ghFinanceLabourPendingPayment/exportXls",
          importExcelUrl: "/ghFinanceLabourPendingPayment/importExcel",

          queryWorkerTypeList: "/ghKindOfWork/queryList",
          settled: "/ghFinanceLabourPendingPayment/settled",
        },
        dictOptions:{},
        superFieldList:[],
        workerTypeData:[],
        /* 查询条件-请不要在queryParam中声明非字符串值的属性 */
        queryParam: {},
        finished: false,
        showSearchPopupFlag: false,
        paymentStatus: "",
        paymentStatusOption:[
          { text: '全部', value: "" },
          { text: '已付款', value: 0 },
          { text: '未付款', value: 1 },
        ],
      }
    },
    created() {
      this.loadWorkerTypeData();
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      showSearchPopup(){
        this.showSearchPopupFlag = true
      },
      onLoadList(e){
        this.ipagination.current++
        this.loadData(this.ipagination.current)
      },
      loadData(arg) {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
          this.dataSource = []
          this.finished = false;
        }
        var params = this.getQueryParams();//查询条件
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            this.dataSource = [...this.dataSource, ...res.result.records]
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }else{
              this.ipagination.total = 0;
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          }else{
            this.$message.warning(res.message)
          }
          if(res.result.records.length<10){
            this.finished = true;
          }
        }).finally(() => {
          this.loading = false
        })
      },
      //加载工种列表
      loadWorkerTypeData(){
        getAction(this.url.queryWorkerTypeList).then((res) => {
          if (res.success) {
            this.workerTypeData = res.result.records || res.result;
          }
        })
      },
      changePaymentStatus(value){
        console.log(value)
        this.showSearchPopupFlag = false
        this.queryParam.paymentStatus = value
        this.loadData(1);
      },
      remit(record){
        this.$refs.labourPendingPaymentModal.add(record);
        this.$refs.labourPendingPaymentModal.title = "劳务付款结算"
      },
      modalOk(){
        this.loadData(1);
      },
      downloadFile(record){
        let arr = record.paymentVoucher.split(",");
        arr.forEach(function (item) {
          window.open(item)
          //window.location.href = item + '?response-content-type=application/octet-stream';

        })
      },
      filterOptionWorkerType(input, option){
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      changeWorkerType(value){
        this.loadData(1);
      },
      settled(record){
        putAction(this.url.settled,record).then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.loadData(1);
          }
        })
      },
      getDictValue(dictCode,value){
        if (value != null){
          let dictValue = filterDictTextByCache(dictCode,value);
          if (dictValue != null && dictValue != ""){
            return dictValue;
          }else {
            return "无"
          }
        }else {
          return "无"
        }
      },
      searchQuery(){
        this.loadData(1);
        this.selectedRowKeys = []
        this.selectedRows = []
        this.showSearchPopupFlag = false
      },
      searchReset() {
        this.showConditionFlag = false
        this.paymentStatus = ""
        this.queryParam = {}
        this.selectedRowKeys = []
        this.selectedRows = []
        this.showSearchPopupFlag = false
        this.loadData(1);
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';

  /deep/ .van-dropdown-menu__bar{
    height: 30px;
    box-shadow: none;
    border: 1px solid lightgrey;
    border-radius: 5px;
  }

  .list{
    overflow-y: scroll;
    height:100vh;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .customer-list {
    align-items: center;
    border-top: 1px solid #d9d9d9;
    /*height: 120px;*/
  }
  .name{
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 13px;
    color: #161616;
    line-height: normal;
  }
  .contact{
    font-size: 12px;
    color: #a39f9f;
    margin-bottom: 5px;
  }
</style>